<template>
  <view class="chat-msg-item">
    <view class="chat-msg-tip"
          v-if="msgInfo.type==$enums.MESSAGE_TYPE.RECALL||msgInfo.type == $enums.MESSAGE_TYPE.TIP_TEXT">
      {{ msgInfo.content }}
    </view>
    <view class="chat-msg-tip" v-if="msgInfo.type==$enums.MESSAGE_TYPE.TIP_TIME">
      {{ $date.toTimeText(msgInfo.sendTime) }}
    </view>
    <view class="chat-msg-normal" v-if="isNormal" :class="{'chat-msg-mine':msgInfo.selfSend}">
      <head-image class="avatar" @longpress.prevent="$emit('longPressHead')" :id="msgInfo.sendId" :url="headImage"
                  :name="showName" :size="80"></head-image>
      <view class="chat-msg-content">
        <view v-if="msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top">
          <text>{{ showName }}</text>
          &nbsp;<span v-if="msgInfo.sendRole != null" style="color: #FFD700; font-weight: bold;">{{
            msgInfo.sendRole
          }}</span>
        </view>
        <view class="chat-msg-bottom">
          <view v-if="msgInfo.type==$enums.MESSAGE_TYPE.TEXT">
            <pop-menu :items="menuItems" @select="onSelectMenu">
              <rich-text class="chat-msg-text" :nodes="$emo.transform(msgInfo.content)"></rich-text>
            </pop-menu>
          </view>

          <view class="chat-msg-image" v-if="msgInfo.type==$enums.MESSAGE_TYPE.IMAGE">
            <pop-menu :items="menuItems" @select="onSelectMenu">
              <view class="img-load-box">
                <image class="send-image" mode=""
                       :src="JSON.parse(msgInfo.content).thumbUrl"
                       @click.stop="onShowFullImage()">
                </image>
                <loading v-if="loading"></loading>
              </view>
            </pop-menu>
            <text title="发送失败" v-if="loadFail" @click="onSendFail"
                  class="send-fail iconfont icon-warning-circle-fill"></text>
          </view>

          <view class="chat-msg-image" v-if="msgInfo.type==$enums.MESSAGE_TYPE.VIDEO">
            <pop-menu :items="menuItems" @select="onSelectMenu">
              <view class="img-load-box">
                <n-video :src="JSON.parse(msgInfo.content).url" class="send-image"></n-video>
                <loading v-if="loading"></loading>
              </view>
            </pop-menu>
            <text title="发送失败" v-if="loadFail" @click="onSendFail"
                  class="send-fail iconfont icon-warning-circle-fill"></text>
          </view>

          <view class="chat-msg-image" v-if="msgInfo.type==$enums.MESSAGE_TYPE.STAR_IMAGE">
            <view class="star-img-load-box">
              <image class="star-send-image" mode="heightFix" :src="JSON.parse(msgInfo.content).thumbUrl"
                     lazy-load="true">
              </image>
              <loading v-if="loading"></loading>
            </view>
            <text title="发送失败" v-if="loadFail" @click="onSendFail"
                  class="send-fail iconfont icon-warning-circle-fill"></text>
          </view>

          <view class="chat-msg-file" v-if="msgInfo.type==$enums.MESSAGE_TYPE.FILE">
            <pop-menu :items="menuItems" @select="onSelectMenu">
              <view class="chat-file-box">
                <view class="chat-file-info">
                  <uni-link class="chat-file-name" :text="data.name" showUnderLine="true"
                            color="#007BFF" :href="data.url"></uni-link>
                  <view class="chat-file-size">{{ fileSize }}</view>
                </view>
                <view class="chat-file-icon iconfont icon-file"></view>
                <loading v-if="loading"></loading>
              </view>
            </pop-menu>
            <text title="发送失败" v-if="loadFail" @click="onSendFail"
                  class="send-fail iconfont icon-warning-circle-fill"></text>
          </view>

          <pop-menu v-if="msgInfo.type==$enums.MESSAGE_TYPE.AUDIO" :items="menuItems" @select="onSelectMenu">
            <view class="chat-msg-audio chat-msg-text" @click="onPlayAudio()">
              <text class="iconfont icon-voice-play"></text>
              <text class="chat-audio-text">{{ JSON.parse(msgInfo.content).duration + '"' }}</text>
              <text v-if="audioPlayState=='PAUSE'" class="iconfont icon-play"></text>
              <text v-if="audioPlayState=='PLAYING'" class="iconfont icon-pause"></text>
            </view>
          </pop-menu>
          <pop-menu v-if="isAction" :items="menuItems" @select="onSelectMenu">
            <view class="chat-realtime chat-msg-text" @click="$emit('call')">
              <text v-if="msgInfo.type==$enums.MESSAGE_TYPE.ACT_RT_VOICE"
                    class="iconfont icon-chat-voice"></text>
              <text v-if="msgInfo.type==$enums.MESSAGE_TYPE.ACT_RT_VIDEO"
                    class="iconfont icon-chat-video"></text>
              <text>{{ msgInfo.content }}</text>
            </view>
          </pop-menu>
		  <!--  -->
          <view class="chat-msg-status" v-if="!isAction">
			  <!-- 已读 -->
            <text class="chat-readed" v-show="msgInfo.selfSend && !msgInfo.groupId
								&& msgInfo.status==$enums.MESSAGE_STATUS.READED">
								<image style="width: 24rpx;height: 24rpx;margin-top: -20rpx;" src="/static/dazi/n.png" mode=""></image>
            </text>
			<!-- 未读 -->
            <text class="chat-unread" v-show="msgInfo.selfSend && !msgInfo.groupId
								&& msgInfo.status!=$enums.MESSAGE_STATUS.READED">
								<image style="width: 24rpx;height: 24rpx;margin-top: -20rpx;" src="/static/dazi/y.png" mode=""></image>
            </text>
          </view>
          <view class="chat-receipt" v-show="msgInfo.receipt" @click="onShowReadedBox">
            <text v-if="msgInfo.receiptOk" class="tool-icon iconfont icon-ok"></text>
            <text v-else>{{ msgInfo.readedCount }}人已读</text>
          </view>
        </view>
      </view>
	  
    </view>
    <chat-group-readed ref="chatGroupReaded" :groupMembers="groupMembers" :msgInfo="msgInfo"></chat-group-readed>

  </view>
</template>

<script>
import nVideo from '@/components/n-video/n-video.vue'

export default {
  components: {nVideo},
  name: "chat-message-item",
  props: {
    headImage: {
      type: String,
      required: true
    },
    showName: {
      type: String,
      required: true
    },
    msgInfo: {
      type: Object,
      required: true
    },
    groupMembers: {
      type: Array
    }
  },
  data() {
    return {
      audioPlayState: 'STOP',
      innerAudioContext: null,
      menu: {
        show: false,
        style: ""
      }
    }
  },
  methods: {
    fullscreenchange(e) {
      if (!e.detail.fullScreen) {
        uni.createVideoContext(e.target.id, this).pause();
      }
    },
    // 播放时进入全屏
    play(id) {
      // uni.createVideoContext(id.toString(), this).requestFullScreen()
      let videoContext = uni.createVideoContext(id.toString(), this)
      videoContext.requestFullScreen()
    },

    onSendFail() {
      uni.showToast({
        title: "该文件已发送失败，目前不支持自动重新发送，建议手动重新发送",
        icon: "none"
      })
    },
    onPlayAudio() {
      // 初始化音频播放器
      if (!this.innerAudioContext) {
        this.innerAudioContext = uni.createInnerAudioContext();
        let url = JSON.parse(this.msgInfo.content).url;
        this.innerAudioContext.src = url;
        this.innerAudioContext.onEnded((e) => {
          console.log('停止')
          this.audioPlayState = "STOP"
        })
        this.innerAudioContext.onError((e) => {
          console.log("播放音频出错");
          console.log(e)
        });
      }
      if (this.audioPlayState == 'STOP') {
        this.innerAudioContext.play();
        this.audioPlayState = "PLAYING";
      } else if (this.audioPlayState == 'PLAYING') {
        this.innerAudioContext.pause();
        this.audioPlayState = "PAUSE"
      } else if (this.audioPlayState == 'PAUSE') {
        this.innerAudioContext.play();
        this.audioPlayState = "PLAYING"
      }
    },
    onSelectMenu(item) {
      console.log("dddddddddddddddddddd")
      this.$emit(item.key.toLowerCase(), this.msgInfo);
      this.menu.show = false;
    },
    onShowFullImage() {
      // if (this.mine.role !== 'VIP'){
      //   return
      // }

      let imageUrl = JSON.parse(this.msgInfo.content).originUrl;
      uni.previewImage({
        urls: [imageUrl]
      })
    },
    onShowReadedBox() {
      this.$refs.chatGroupReaded.open();
    }
  },
  computed: {
    mine() {
      return this.userStore.userInfo;
    },

    loading() {
      return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loading";
    },
    loadFail() {
      return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "fail";
    },
    data() {
      return JSON.parse(this.msgInfo.content)
    },
    fileSize() {
      let size = this.data.size;
      if (size > 1024 * 1024) {
        return Math.round(size / 1024 / 1024) + "M";
      }
      if (size > 1024) {
        return Math.round(size / 1024) + "KB";
      }
      return size + "B";
    },
    menuItems() {
      let items = [];
      if (this.msgInfo.type == this.$enums.MESSAGE_TYPE.TEXT) {
        items.push({
          key: 'COPY',
          name: '复制',
          icon: '/static/dazi/copy-success.png'
        });
      }
      if (this.msgInfo.selfSend && this.msgInfo.id > 0) {
        items.push({
          key: 'RECALL',
          name: '撤回',
          icon: '/static/dazi/undo.png'
        });
      }
      items.push({
        key: 'DELETE',
        name: '删除',
        icon: '/static/dazi/trash.png',
        color: '#e64e4e'
      });
      if (this.msgInfo.type == this.$enums.MESSAGE_TYPE.FILE) {
        items.push({
          key: 'DOWNLOAD',
          name: '下载并打开',
          icon: 'download'
        });
      }
      //if (this.msgInfo.type == this.$enums.MESSAGE_TYPE.IMAGE || this.msgInfo.type == this.$enums.MESSAGE_TYPE.STAR_IMAGE) {
		  // 收藏 替换成翻译
      items.push({
        key: 'STAR',
        name: '翻译',
        icon: '/static/dazi/translate.png',
      });
      //}
      return items;
    },
    isAction() {
      return this.$msgType.isAction(this.msgInfo.type);
    },
    isNormal() {
      const type = this.msgInfo.type;
      return this.$msgType.isNormal(type) || this.$msgType.isAction(type)
    }
  }

}
</script>

<style scoped lang="scss">
.chat-msg-item {
  padding: 2rpx 20rpx;

  .chat-msg-tip {
    line-height: 60rpx;
    text-align: center;
    color: #837487;
    font-size: 24rpx;
    padding: 10rpx;
  }

  .chat-msg-normal {
    position: relative;
    font-size: 0;
    margin-bottom: 15rpx;
    padding-left: 110rpx;
    min-height: 80rpx;

    .avatar {
      position: absolute;
      top: 0;
      left: 0;
    }

    .chat-msg-content {
      text-align: left;

      .chat-msg-top {
        display: flex;
        flex-wrap: nowrap;
        color: #333;
        font-size: 24rpx;
        line-height: 24rpx;

      }

      .chat-msg-bottom {
        display: inline-block;
        padding-right: 80rpx;

        .chat-msg-text {
          position: relative;
          line-height: 60rpx;
          margin-top: 10rpx;
          padding: 8rpx 20rpx;
          background-color: #fff;
          border-radius: 20rpx;
          color: #2A222F;
          font-size: 28rpx;
          text-align: left;
          display: block;
          word-break: break-all;
          white-space: pre-line;


          // &:after {
          //   content: "";
          //   position: absolute;
          //   left: -20rpx;
          //   top: 26rpx;
          //   width: 6rpx;
          //   height: 6rpx;
          //   border-style: solid dashed dashed;
          //   border-color: #eee transparent transparent;
          //   overflow: hidden;
          //   border-width: 18rpx;
          // }
        }


        .chat-msg-image {
          display: flex;
          flex-wrap: nowrap;
          flex-direction: row;
          align-items: center;

          .img-load-box {
            position: relative;
            overflow: hidden; /* 隐藏溢出部分 */

            .send-image-no-vip {
              // min-width: 200rpx;
              // min-height: 200rpx;
              // max-width: 400rpx;
              // max-height: 400rpx;
			  width: 150rpx;
			  height: 300rpx;
              border: 8rpx solid #ebebf5;
              cursor: pointer;
              filter: blur(30px); /* 应用模糊效果 */
              transform: scale(1.1); /* 轻微放大以增强马赛克效果 */
            }

            .send-image {
              // min-width: 200rpx;
              // max-width: 400rpx;
			  width: 266rpx;
              height: 150rpx;
              border: 8rpx solid #ebebf5;
			  border-radius: 24rpx;
			  margin-left: 8rpx;
              cursor: pointer;
            }
          }

          .star-img-load-box {
            position: relative;

            .star-send-image {
              width: 180rpx;
              height: 180rpx;
              border: 8rpx solid #ebebf5;
              cursor: pointer;
            }
          }

          .send-fail {
            color: #e60c0c;
            font-size: 30px;
            cursor: pointer;
            margin: 0 20px;
          }
        }

        .chat-msg-file {
          display: flex;
          flex-wrap: nowrap;
          flex-direction: row;
          align-items: center;
          cursor: pointer;

          .chat-file-box {
            position: relative;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            min-height: 80px;
            border: #dddddd solid 1px;
            border-radius: 10rpx;
            background-color: #eeeeee;
            padding: 10px 15px;
            box-shadow: 2px 2px 2px #c0c0c0;

            .chat-file-info {
              flex: 1;
              height: 100%;
              text-align: left;
              font-size: 14px;
              width: 300rpx;

              .chat-file-name {
                font-size: 16px;
                font-weight: 600;
                margin-bottom: 15px;
                word-break: break-all;
              }
            }

            .chat-file-icon {
              font-size: 80rpx;
              color: #d42e07;
            }
          }

          .send-fail {
            color: #e60c0c;
            font-size: 50rpx;
            cursor: pointer;
            margin: 0 20rpx;
          }

        }

        .chat-msg-audio {
          display: flex;
          align-items: center;

          .chat-audio-text {
            padding-right: 8px;
          }

          .icon-voice-play {
            font-size: 20px;
            padding-right: 8px;
          }
        }

        .chat-realtime {
          display: flex;
          align-items: center;

          .iconfont {
            font-size: 20px;
            padding-right: 8px;
          }
        }

        .chat-msg-status {
			margin-top: -30rpx;
			margin-left: -10rpx;
			text-align: left;
          display: block;

          .chat-readed {
            font-size: 12px;
            color: #888;
            font-weight: 600;
          }

          .chat-unread {
            font-size: 12px;
            color: #f23c0f;
            font-weight: 600;
          }
        }

        .chat-receipt {
          font-size: 13px;
          color: #10AEFF;
          font-weight: 600;

          .icon-ok {
            font-size: 20px;
            color: #329432;
          }
        }
      }
    }


    &.chat-msg-mine {
      text-align: right;
      padding-left: 0;
      padding-right: 110rpx;

      .avatar {
        left: auto;
        right: 0;
      }

      .chat-msg-content {
        text-align: right;

        .chat-msg-bottom {
          padding-left: 80rpx;
          padding-right: 0;

          .chat-msg-text {
            margin-left: 10px;
            background-color: #fb75d6;
            color: #fff;

            &:after {
              left: auto;
              right: -10px;
              border-top-color: #10AEFF;
            }
          }

          .chat-msg-image {
            flex-direction: row-reverse;
          }

          .chat-msg-file {
            flex-direction: row-reverse;
          }

          .chat-msg-audio {
            flex-direction: row-reverse;

            .chat-audio-text {
              padding-right: 0;
              padding-left: 8px;
            }

            .icon-voice-play {
              transform: rotateY(180deg);
            }
          }

          .chat-realtime {
            display: flex;
            flex-direction: row-reverse;

            .iconfont {
              transform: rotateY(180deg);
            }
          }

        }
      }
    }

  }
}
</style>